<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">退款详情</block>
		</cu-custom>
		<view class="bg-white margin-xs radius padding-sm">
			<text class="text-orange">{{orderRefund.statusDesc}}</text>
			<view class="text-sm" v-if="orderRefund.status == '21' || orderRefund.status == '22'">
				{{orderRefund.refuseReason}}
			</view>
			<view class="cu-bar bg-white margin-top" v-if="orderRefund.arrivalStatus =='1'">
				<view class="action" v-if="orderRefund.userReceivedAccount">
					退回{{orderRefund.userReceivedAccount}}
				</view>
				<view class="action">
					<view class="text-red text-price text-xxl">{{orderRefund.refundAmount}}</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-xs radius padding-sm">
			<view class="text-bold">
				退款信息
			</view>
			<view class="flex">
				<view class="basis-xs margin-xs">
					<view v-if="orderItem.picUrl" class="cu-avatar xl"
						:style="'background-image:url(' + orderItem.picUrl + ')'">
					</view>
				</view>
				<view class="basis-xl margin-xs">
					<view>
						{{orderItem.spuName}}
					</view>
					<view v-if="orderItem.specsInfo" class="text-gray">
						{{orderItem.specsInfo}}
					</view>
					<view class="flex justify-between align-end padding-top-xs">
						<view class="text-bold text-df text-price" :class="'text-'+ theme.themeColor">
							{{orderItem.salesPrice}}
						</view>
						<view> x{{orderItem.buyQuantity}}</view>
					</view>
				</view>
			</view>
			<view class="cu-bar" style="min-height: 80rpx;">
				<view class="action">
					<text class="cuIcon-title" :class="'text-'+theme.themeColor"></text> 退款原因
				</view>
				<view class="action">
					<view class="text-black">{{orderRefund.refundReason}}</view>
				</view>
			</view>
			<view class="cu-bar" style="min-height: 80rpx;">
				<view class="action">
					<text class="cuIcon-title" :class="'text-'+theme.themeColor"></text> 退款金额
				</view>
				<view class="action">
					<view class="text-black text-price">{{orderRefund.refundAmount}}</view>
				</view>
			</view>
			<view class="cu-bar" v-if="orderRefund.status == '11' || orderRefund.status == '12'">
				<view class="action">
					<text class="cuIcon-title" :class="'text-'+theme.themeColor"></text> 退款是否到账
				</view>
				<view class="action">
					<view class="cu-tag" :class="orderRefund.arrivalStatus =='1' ? 'bg-'+theme.themeColor :''">
						{{orderRefund.arrivalStatus =='1' ? '已到账' :'未到账'}}
					</view>
				</view>
			</view>
			<view class="cu-bar">
				<view class="action">
					<text class="cuIcon-title " :class="'text-'+theme.themeColor"></text> 申请时间
				</view>
				<view class="action">
					<view class="text-black">{{orderRefund.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getById as getOrderItemById
	} from '@/api/orderitem.js';
	export default {
		data() {
			return {
				theme: getApp().globalData.theme,
				orderItem: {},
				orderRefund: {
					status: ''
				}
			}
		},
		onLoad(option) {
			getApp().initPage().then(res => {
				this.orderRefund.orderItemId = option.orderItemId
				this.getDetail(option.orderItemId);
			})
		},
		methods: {
			getDetail(id) {
				getOrderItemById(id).then(res => {
					this.orderItem = res.data
					this.orderRefund = res.data.orderRefund
				})
			},
		},
	}
</script>

<style>
</style>
